<template>
  <div>
    <div class="input-container">
      <a-row>
        <a-space direction="vertical">
          <a-input style="width: 80vh" size="large" @keyup.enter.native="handleQuery()" v-model:value="searchKey"
            placeholder="根据关键词查询工艺风险点">
            <template #prefix>
              <SearchOutlined />
            </template>
          </a-input>
        </a-space>
        <a-button style="margin-left: 10px;" type="dashed" @click="reset">重置</a-button>
      </a-row>
    </div>
    <br />
    <a-row>
      <a-col :span="6" v-for="(risk, index) in riskData" :key="risk.id" style="margin-bottom: 15px;">
        <a-card hoverable style="width: 93%;">
          <template #cover>
            <template v-if="risk.fileType == 'png' || risk.fileType == 'jpg'">
              <div style="display: flex; justify-content: center; align-items: center; margin-top: 10px;">
                <a-image :width="200" :height="150" :src="`/dev-api/ufs/preview/${risk.riskFileId}`" />
              </div>
            </template>
            <template v-if="risk.fileType == 'mp4'">
              <div class="video-player">
                <video style="width: 100%;height: 150px;" ref="videoPlayer"
                  :src="`/dev-api/ufs/preview/${risk.riskFileId}`" controls></video>
              </div>
            </template>
            <template v-if="!risk.riskFileId">
              <div style="margin-top: 10px;">
                <a-empty description="暂无图片/视频" />
              </div>
            </template>
          </template>
          <a-card-meta :title="risk.riskType" :description="risk.risks" />
        </a-card>
      </a-col>
    </a-row>
    <AntdZh>
      <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total" @change="getList" />
    </AntdZh>
  </div>
</template>
<script setup>
import { SearchOutlined } from '@ant-design/icons-vue';
import { queryList } from "@/api/salvage/salvageRisk";
const query = ref({ pageNum: 1, pageSize: 8, sortBy: 'id', order: 'DESC', searchKey: '', riskType: '' });
const riskData = ref()
const total = ref(1)
const searchKey = ref();
const videoPlayer = ref(null);

// 获取列表
function getList() {
  queryList(query.value).then((res) => {
    // 提取文件的扩展名
    res.content.forEach((item) => {
      if (item.riskFileName != null) {
        let index = item.riskFileName.lastIndexOf(".");
        item.fileType = item.riskFileName.substr(index + 1);
      }
    });
    riskData.value = res.content
    total.value = res.totalElements
    // console.log('riskData.value', riskData.value);
  });
}
getList();

/** 搜索按钮操作 */
function handleQuery() {
  query.value.searchKey = searchKey;
  getList();
}

/** 表单重置 */
function reset() {
  searchKey.value = '';
  query.value = { pageNum: 1, pageSize: 8, sortBy: 'id', order: 'DESC', searchKey: '', riskType: '' }
  getList();
}

</script>
<style scoped>
.gutter-box {
  padding: 8px 0;
}

.input-container {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  height: 100%;
  /* 根据需要设置容器高度 */
}
</style>
